<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <base href="" />
    <title>eTaxware : <?php echo $data['site_name']; ?></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="stylesheet" href="assets/css/bootstrap.css" type="text/css" charset="utf-8">
	<script src="assets/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="assets/js/bootstrap.js"></script> 
	<script type="text/javascript" src="assets/js/accounting.min.js"></script>	
		
<script type="text/javascript">

var row_i = 0 ;
var menu = new Array();
	menu = [{id:"1",name :"Nasi Goreng",qty : 1,price : 30000.00,scharge :0.50,tax :10.00,discount : 0.50},
			{id:"2",name :"Ikan Gurame",qty : 1,price : 100000.00,scharge :0.50,tax :10.00,discount : 0.50},
			{id:"3",name :"Es Kelapa",qty : 1,price : 12500.00,scharge :0.50,tax :10.00,discount : 0.50}
		   ];
	

/*--------------------------------------Define Class for a Bill------------------------------------------------------*/
var Bill = (function () { 
	var me = this;
	this.items  	= [] ;
	me.t_items 		= 0;
	me.t_price		= 0.00;
	me.t_scharge 	= 0.00;
	me.t_tax		= 0.00;
	me.t_discount	= 0.00;
	me.t_grand		= 0.00;
	
	me._target_t_items 		= '#t_items';
	me._target_t_price 		= '#t_price';
	me._target_t_scharge 	= '#t_scharge';
	me._target_t_discount 	= '#t_discount';
	me._target_t_tax 		= '#t_tax';
	me._target_t_grand 		= '#t_grand';
	
	me._target_table		= '#tbl_sales';
	me._target_tbody_sales	= "#tbody_sales";
	
	/*------------EMPTY bill---------------------------*/
	me.reset = function () {
		me.items = [];
		me.refresh_table();
		me.reset_summary();
		me.refresh_summary();
	};
	
	me.reset_summary = function(){
		me.t_items 		= 0;
		me.t_price		= 0.00;
		me.t_scharge 	= 0.00;
		me.t_tax		= 0.00;
		me.t_discount	= 0.00;
		me.t_grand		= 0.00;
	}
	me.refresh_summary = function(){
		$(me._target_t_items).text('0'); 
		$(me._target_t_price).text('0.00');
		$(me._target_t_scharge).text('0.00');
		$(me._target_t_tax).text('0.00');
		$(me._target_t_discount).text('0.00');
		$(me._target_t_grand).text('0.00');
	}
	/*------------Display items on table----------------*/
 	me.refresh_table = function(){
		$(me._target_tbody_sales).empty();		
		$.each(me.items,function(i){ 
			var newTr=$('<tr id="row_'+me.items[i].id+'"></tr>');
				row 	= '<td  style="width: 10%;">';
				row		+= '<button id="del-'+me.items[i].id+'" value="val-'+me.items[i].id+'"><i class="glyphicon glyphicon-remove-circle"></i></button>';
				row		+= '</td>';
				row		+= '<td style="width: 50%;">'+me.items[i].name+' (@'+accounting.formatMoney(me.items[i].price,{ symbol: "Rp.",  format: "%s %v" })+')</td>';
				row		+= '<td style="width: 20%;"><span id="qty">'+me.items[i].qty+'</span></td>';
				row		+= '<td style="width: 20%;">'+ accounting.formatMoney(me.items[i].price * me.items[i].qty,{ symbol: "Rp.",  format: "%s %v" }) +'</td>';
			
				newTr.html(row);
				newTr.appendTo(me._target_table); 
		});
	}
	
	
	/*----display summary-----*/
	me.display_summary = function(){
	
		$(me._target_t_items).text(me.t_items); 
		$(me._target_t_price).text(accounting.formatMoney(me.t_price.toFixed(2),{ symbol: "Rp.",  format: "%s %v" }));
		$(me._target_t_scharge).text(accounting.formatMoney(me.t_scharge.toFixed(2),{ symbol: "Rp.",  format: "%s %v" }));
		$(me._target_t_tax).text(accounting.formatMoney(me.t_tax.toFixed(2),{ symbol: "Rp.",  format: "%s %v" }));
		$(me._target_t_discount).text(accounting.formatMoney(me.t_discount.toFixed(2),{ symbol: "Rp.",  format: "%s %v" }));
		$(me._target_t_grand).text(accounting.formatMoney(me.t_grand.toFixed(2),{ symbol: "Rp.",  format: "%s %v" }));
		
	}
	
	me.add_item = function (newItem){
		//alert('newItem.qty : '+newItem.qty);
		//console.log(me.items);
		
		if (!(me.search_indexbyid(newItem.id)==-1)){
			var i = me.search_indexbyid(newItem.id); 
			me.items[i].qty = me.items[i].qty + newItem.qty;
		} else {
			me.items.push(newItem);
		}	
		
		
		//console.log(newItem);
		//console.log(me.items);
		
		/*calculate summary*/
		me.recalc_total();
		
		/*refresh table*/
		me.refresh_table()
		
		/*refresh summary*/
		me.display_summary();
		
		return null;
	}
	
	me.remove_item = function (id){
		var index = objectIdxFindByKey(me.items,'id',id);
		me.items.splice(index,1);
				
		/*calculate summary*/
		me.recalc_total();
		
		/*refresh table*/
		me.refresh_table()
		
		/*refresh summary*/
		me.display_summary();
		
		return null;
	}
	
	me.recalc_total = function (){
		//reseting total first 
		me.t_items 		= 0;
		me.t_price		= 0.00;
		me.t_scharge 	= 0.00;
		me.t_tax		= 0.00;
		me.t_discount	= 0.00;
		me.t_grand		= 0.00;
		
		$.each(me.items,function(i){
		//alert(me.items[i]['qty']);
			me.t_items		= me.t_items + me.items[i]['qty'];
			me.t_price		= me.t_price + (me.items[i]['qty']*me.items[i]['price']);
			me.t_scharge	= me.t_scharge + (me.items[i]['scharge']*(me.items[i]['qty']*me.items[i]['price'])/100);
			me.t_tax		= me.t_tax + ( me.items[i]['tax']*(    (me.items[i]['scharge']*(me.items[i]['qty']*me.items[i]['price'])/100)  +  (me.items[i]['price']*me.items[i]['qty'])   )/100);
			me.t_discount	= me.t_discount + (me.items[i]['discount']*(me.items[i]['price']*me.items[i]['qty'])/100);
			me.t_grand		= me.t_price + me.t_scharge + me.t_tax - me.t_discount ;
		});	
	}
	
	me.get_summary_val = function (s){
		var value = null;
		if (me.hasOwnProperty(s)) {
				value = me[s];
		}
		return value;
	}
	
	/*------------------double id handling----------------*/
	me.hasItem = function ( item ) {
		for( var current in me.items ) {
			var testItem = me.items[current];
			var matches = true;
			for( var field in item ){
				if( typeof( item[field] ) != "function"	&& 
					field != "qty"  				&& 
					field != "id" 						){
					if( item[field] != testItem[field] ){
						matches = false;
					}
				}	
			}
			if( matches ){ 
				return current; 
			}
		}
		return false;
	};
	
	
	me.search_indexbyid = function(id) {
		for (var i = 0, len = me.items.length; i < len; i++) {
        if (me.items[i].id === id)
            return i;
		}
		return -1; 
	}
	
	
});

/*------------------ Utility Function ----------------------*/

function objectFindByKey(array, key, value) {
for (var i = 0; i < array.length; i++) {
	//console.log(i+' : '+array[i][key]+' Value : '+value);
	if (array[i][key] === value) {
		//console.log(array[i]);
		return i;
	}
}
return null;
}

function objectIdxFindByKey(array, key, value) {
    for (var i = 0; i < array.length; i++) {
        if (array[i][key] === value) {
            return i;
        }
    }
    return null;
}


function addquote(s){
 return "'"+s+"'";
}

/*-----------------------------------END OF UITILITY----------------------------------*/


/*-----------------------------------ON DOCUMENT READY--------------------------------*/
$(document).ready(function(){

/*create new bill*/
	var bill = new Bill();

 /*add row */
	$('button[id^="btn_addrow-"]').click(function(){
		var btn_id = $(this).attr('id');
		var id     = btn_id.split("-");
		var idx  = objectFindByKey(menu,'id',id[1]);	
		bill.add_item(menu[idx]); 
	});
  
  /*del row */
 	$("#tbl_sales").on("click",'button[id^="del-"]',function(){
		var delID=$(this).attr('id');
		var dl_id=delID.split("-");
		bill.remove_item(dl_id); 
	});
  
  /* Reset Bill Button*/
  $('button[id="btn_reset"]').click( function(){
		bill.reset(); 
	});

  
});





</script>
</head>
<body>
<p>
<button type="button" id="btn_addrow-1">Testing : Product 1</button>
<button type="button" id="btn_addrow-2">Testing : Product 2</button>
<button type="button" id="btn_addrow-3">Testing : Product 3</button>

<button type="button" id="btn_reset" >RESET BILL</button>


		<table width="100%" border="1" cellpadding="0" cellspacing="0"  style="margin:5px 0 0 0;">
			<thead>
			<tr >
				<th style="width: 10%" >X</th>
				<th style="width: 50%">Product</th>		
				<th style="width: 20%">Qty</th>
				<th style="width: 20%">Price</th>
				
			</tr>
			</thead>	
        </table>


		<table width="100%" border="1" cellpadding="0" cellspacing="0"  id="tbl_sales" style="margin:0;">
		<tbody id="tbody_sales">
		</tbody>
		</table>
		
		<p><p><p>
		<!-- Panel TOTAL -->
		<table width="100%" border="2" cellpadding="0" cellspacing="0"  id="tbl_summary" style="margin:0;">
		<tbody>
		<tr><td style="width: 25%">Total Items</td><td id="t_items" style="width: 25%">0.00</td><td style="width: 25%">Total</td><td id="t_price" style="width: 25%">0.00</td>
		</tr>	
		<tr><td style="width: 25%">Tax</td><td id="t_tax" style="width: 25%">0.00</td><td style="width: 25%">S-Charge</td><td id="t_scharge" style="width: 25%">0.00</td>
		</tr>
		<tr><td style="width: 25%"></td><td style="width: 25%"></td><td style="width: 25%">Disc</td><td id="t_discount" style="width: 25%">0.00</td>
		</tr>
		<tr><td style="width: 25%"></td><td style="width: 25%"></td><td style="width: 25%">GRAND TOTAL</td><td id="t_grand" style="width: 25%"></td>
		</tr>
		</tbody>
		</table>


</body>
</html>